<template>
	<div class="border py-1 px-2 rounded mr-2 position-relative d-flex align-items-center">
		<div v-if="type != 0">
			<!-- 颜色选择器 -->
			<div class="d-flex align-items-center" 
			style="line-height: 1.5;"
			v-if="type === 1">
				<span>选择:</span>
				<el-color-picker size="mini" 
				:value="item.color"
				@change="onColorChange"></el-color-picker>
			</div>
			
			<!-- 图片选择 -->
			<template v-else>
				<span v-if="!item.image" class="btn btn-light border mr-2"
				@click="chooseImage">
					<i class="el-icon-plus"></i>
				</span>
				<img v-else class=" rounded" :src="item.image" 
				style="width: 80px;cursor: pointer;" 
				@click="chooseImage"/>
			</template>
			
		</div>
		<input v-if="type === 0" :value="item.value" @input="inputChange" class="form-control text-center ml-1" 
		style="width: 80px;font-size: 15px;" />

		<!-- 删除 -->
		<span class=" btn btn-light p-0 position-absolute" 
		style="line-height: 1;right: -10px;top: -10px;"
		@click="delSkuValueEvent">
			<i class="el-icon-circle-close"></i>
		</span>
	</div>
</template>

<script>
	import {mapMutations} from "vuex";
	export default {
		inject: ['app', 'layout'],
		props: {
			type: {
				type: Number,
				default: 0
			},
			item: Object,
			index: Number,
			cardIndex: Number
		},
		
		watch: {
			type(newValue, oldValue) {
				let keys = ['text', 'color', 'image']
				let defaultValue = ['属性值', '#FFFFFF', '/favicon.ico']
				this.item.value = this.item[keys[newValue]] ? this.item[keys[newValue]] : defaultValue[newValue]
				this.updateSkuValueEvent()
			}
		},
		
		methods: {
			...mapMutations(['delSkuValue', 'updateSkuValue']),
			
			//删除skuValueEvent
			delSkuValueEvent() {
				this.layout.showLoading()
				this.axios.post('/admin/goods_skus_card_value/' + this.item.id + '/delete', {},
				{token: true}).then(res => {
					let data = res.data.data
					this.delSkuValue({
						cardIndex: this.cardIndex,
						valueIndex: this.index
					})
					this.$message({
						message: '删除一个规格值成功',
						type: 'success'
					});
					this.layout.hideLoading()
				}).catch(err => {
					this.delSkuCard(this.index)
					this.layout.hideLoading()
				})
			},
			
			//更新skuValue
			updateSkuValueEvent() {
				let keys = ['text', 'color', 'image']
				this.item.value = this.item[keys[this.type]]
				console.log('item', this.item)
				this.axios.post('admin/goods_skus_card_value/' + this.item.id, this.item, {token: true})
					.then(res => {
						console.log('修改sku value成功', res)
					}).catch(err => {
						console.log('修改sku value失败', err)
					})
			},
			
			vModel(key, value) {
				this.updateSkuValue({
					cardIndex: this.cardIndex,
					specValueIndex: this.index,
					key: key,
					value: value
				})
				this.updateSkuValueEvent()
			},
			
			inputChange(e) {
				this.vModel('text', e.target.value)
				//this.vModel('value', e.target.value)
			},
			
			//选择图片
			chooseImage() {
				this.app.showImageModel((res) => {
					this.vModel('image', res[0].url)
				}, 2)
			},
			
			//监听颜色选择器
			onColorChange(e) {
				this.vModel('color', e)
			}
		}
	}
</script>

<style></style>
